import React, { useEffect, useState } from 'react'
import { Input, Tabs, Sticky, Card, Button, Toast, Steps } from 'react-vant'
import { history, useLocation } from 'umi'
import { ArrowLeft } from '@react-vant/icons'
import AMapLoader from '@amap/amap-jsapi-loader'
import './zhifu.css'
export default function Map(props) {

    const initMap = () => {
        AMapLoader.load({
            key: "118658e414958996fe413b34270729ed", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0",              // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ['AMap.Riding', 'AMap.LngLat', 'AMap.Map', 'AMap.Polyline', 'AMap.PolylineEditor', 'AMap.Driving'],// 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
            let map = new AMap.Map("container", { //设置地图容器id
                center: [115.487904, 38.81466],
                zoom: 14
            });
            var ridingOption = {
                map: map,
                panel: "panel",
                policy: 1,
                hideMarkers: false,
                isOutline: true,
                outlineColor: '#ffeeee',
                autoFitView: true,
            }
            var riding = new AMap.Riding(ridingOption)
            //根据起终点坐标规划骑行路线
            // 保定理工坐标
            const zuoOne = new AMap.LngLat(115.487904, 38.81466)

            // 万博广场坐标
            const zuoTwo = new AMap.LngLat(115.46964, 38.875879)

            riding.search(zuoOne, zuoTwo, function (status, result) {
                // result即是对应的公交路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_RidingResult

                if (status === 'complete') {
                    // log.success('骑行路线数据查询成功')
                    console.log(status, "成功");
                } else {
                    // log.error('骑行路线数据查询失败' + result)
                    console.log(result, "为什么失败啊");
                }
            });
        }).catch(e => {
            console.log(e);
        })
    }
    useEffect(function () {
        initMap()
    }, [])
    return (
        <div style={{ height: "100%" }}>
            <Sticky>
                <div style={{ background: "#fff" }}>
                    <p className='fanleft' style={{ display: "inline-block" }} onClick={() => history.push('/zhi', { ids: 2 })}><ArrowLeft fontSize={25} /></p>
                    <p style={{ display: "inline-block" }}>物流</p>
                </div>
            </Sticky>
            <div style={{ height: "120%", background: "#e2e2e2" }}>
                
                <div id="container" style={{ width: '100%', height: '300px' }}>
                </div>
                <div id="panel"></div>

                <div style={{ height: "110px" }}>
                    <Card style={{ height: "110px" }}>
                        <div style={{ marginTop: "15px", marginLeft: "15px" }} className='wuliu'>
                            <p>国内承运人：中通快递</p>
                            <p>运单号：7237568907</p>
                            <p>预计送达时间：9月10号  9：00-15：00</p>
                        </div>

                    </Card>
                </div>
                <div style={{  marginTop: "5px" }}>
                    <Card style={{ height: "380px",padding: "20px" }}>
                        <Steps direction="vertical" active={0}>
                            <Steps.Item>
                                <h3>【城市】物流状态1</h3>
                                <p>2016-07-12 12:40</p>
                            </Steps.Item>
                            <Steps.Item>
                                <h3>【城市】物流状态2</h3>
                                <p>2016-07-11 10:00</p>
                            </Steps.Item>
                            <Steps.Item>
                                <h3>快件已发货</h3>
                                <p>2016-07-10 09:30</p>
                            </Steps.Item>
                            <Steps.Item>
                                <h3></h3>
                                <p>2016-07-10 09:30</p>
                            </Steps.Item>
                            <Steps.Item>
                                <h3></h3>
                                <p>2016-07-10 09:30</p>
                            </Steps.Item>
                        </Steps>
                    </Card>
                </div>

            </div>

        </div>
    )
}
